<template>
  <div>
    <h2>$nexyTick 的基本使用</h2>
    <p ref="pp">{{ msg }}</p>
    <button @click="changeMsg">改 msg</button>
  </div>
</template>

<script>
export default {
  name: 'VueDemoApp',

  data() {
    return {
      msg: '你好世界'
    };
  },
  methods: {
    changeMsg() {
      // 修改完 msg 后
      this.msg = 'HelloWorld'
      // 立刻获取最新的 DOM 内容
      // console.log(this.$refs.pp.innerHTML) // 你好世界
      // Vue 的数据修改后, Dom更新 是 异步的
      // this.$nextTick 这个 API 专门用于解决该问题
      // 用法: 传入一个回调函数, 回调函数会在下一次 DOM 更新后才执行
      this.$nextTick(() => {
        // 这个回调函数会在下一次 DOM 更新后执行
        console.log(this.$refs.pp.innerHTML) 
      })
    }
  },
};
</script>

<style lang="scss" scoped>

</style>